<style>
    .column {
        width: 500px;
        float: left;
        padding-bottom: 100px;
    }

    .portlet {
        margin: 0 1em 1em 0;
    }

    .portlet-header {
        margin: 0.3em;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 0.5em;
    }

    .portlet-header .ui-icon {
        float: right;
    }

    .portlet-content {
        padding: 1em;
    }

    .ui-sortable-placeholder {
        border: 1px dotted black;
        visibility: visible !important;
        height: 50px !important;
    }

    .ui-sortable-placeholder * {
        visibility: hidden;
    }
</style>
<script type="text/javascript">
var datagrid = null;
var datagridOrder = null;
$(function() {
    $(".column").sortable({
                connectWith: ".column"
            });

    datagrid = $("#datagrid").r9jasonDataTable({
                // online1DataTable extra params
                "idTr" : true, // assign <tr id='xxx'> from 1st columns array(aoColumns);
                "extraParam" : function(aoData) { // pass extra params to server

                },
                "reassignEvent" : function() { // extra function for reassignEvent when JSON is back from server
                },

                // datatables params
                "bLengthChange": true,
                "bFilter": false,
                "bProcessing": true,
                "bServerSide": true,
                "bAutoWidth": false,
                "sAjaxSource": "<?php echo url_for('member/contactUsJsonList') ?>",
                "sPaginationType": "full_numbers",
                "aoColumns": [
                    { "sName" : "contact_id", "bVisible" : false},
                    { "sName" : "full_name",  "bSortable": true, "fnRender": function (oObj) {
                        return "<a id='viewLink' ref='" + oObj.aData[0] + "' href='<?php echo url_for("/member/contactUsEdit?contact_id=")?>/" + oObj.aData[0] + "'>" + oObj.aData[1] + "</a>";
                    }},
                    { "sName" : "email",  "bSortable": true},
                    { "sName" : "message",  "bSortable": true},
                    { "sName" : "status_code",  "bSortable": true},
                    { "sName" : "created_on",  "bSortable": true}
                ]
            });

    datagridOrder = $("#datagridOrder").r9jasonDataTable({
                // online1DataTable extra params
                "idTr" : true, // assign <tr id='xxx'> from 1st columns array(aoColumns);
                "extraParam" : function(aoData) { // pass extra params to server
                },
                "reassignEvent" : function() { // extra function for reassignEvent when JSON is back from server
                },

                // datatables params
                "bLengthChange": true,
                "bFilter": false,
                "bProcessing": true,
                "bServerSide": true,
                "bAutoWidth": false,
                "sAjaxSource": "<?php echo url_for('member/memberOrderJsonList') ?>",
                "sPaginationType": "full_numbers",
                "aoColumns": [
                    { "sName" : "memberOrder.order_id", "bVisible" : false},
                    { "sName" : "member.fullname",  "bSortable": true, "fnRender": function (oObj) {
                        return "<a id='viewLink' ref='" + oObj.aData[0] + "' href='<?php echo url_for("/member/orderEditEdit?order_id=")?>/" + oObj.aData[0] + "'>" + oObj.aData[1] + "</a>";
                    }},
                    { "sName" : "memberOrder.payment_method",  "bSortable": true},
                    { "sName" : "memberOrder.total_amount",  "bSortable": true},
                    { "sName" : "memberOrder.created_on",  "bSortable": true}
                ]
            });
});

</script>

<div style="padding:6px">
    <h3>Dashboard</h3>
</div>
<div class="demo" style="padding:6px">
    <div class="column">
        <div class="portlet">
            <div class="portlet-header">Total Sales</div>
            <div class="portlet-content">
                <table cellpadding="3" cellspacing="3" width="100%">
                    <tr>
                        <td><strong>This Month Sales</strong></td>
                        <td align="right"><?php echo number_format(0, 2); ?> RM</td>
                    </tr>
                    <tr>
                        <td><strong>Total Orders</strong></td>
                        <td align="right">0</td>
                    </tr>
                    <tr>
                        <td><strong>New Members Joined</strong></td>
                        <td align="right">0</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="portlet">
            <div class="portlet-header">Customer Messages</div>
            <div class="portlet-content">
                <table class="display" id="datagrid" border="0" width="100%" cellpadding="0" cellspacing="0">
                    <thead>
                    <tr>
                        <th>id [hidden]</th>
                        <th width="5%">full name</th>
                        <th width="30%">Email</th>
                        <th width="50%">message</th>
                        <th width="15%">Status</th>
                        <th width="15%">Date</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>

    </div>

    <div class="column">
        <div class="portlet">
            <div class="portlet-header">Pending Orders</div>
            <div class="portlet-content">
                <table class="display" id="datagridOrder" border="0" width="100%" cellpadding="0" cellspacing="0">
                    <thead>
                    <tr>
                        <th>id [hidden]</th>
                        <th width="5%">Shareholder</th>
                        <th width="30%">e-Cash</th>
                        <th width="50%">Maintenance</th>
                        <th width="15%">Total shares</th>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input title="" size="10" type="text" id="search_username" value="" class="search_init"/>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>

    </div>
</div>
